<template>
  <!-- 列表 -->
  <div
    class="flex module-show-list"
    v-if="list.length > 0"
    animation="fadeInUpBig"
  >
    <div
      class="module-show-item flex hand"
      @click.stop="jumpDetail(item)"
      v-for="(item, index) in list"
      :key="index + Date.now()"
    >
      <div class="avatar">
        <!-- <img :src="item.avatar" alt=""> -->
        <el-image :src="item.avatar" class="full-bg">
          <div slot="placeholder" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
          <div slot="error" class="pac">
            <i class="el-icon-loading primary fs-xl"></i>
          </div>
        </el-image>
      </div>
      <div
        class="intro"
      >
        <p
          class="intro-name fs-b fc-b0 strong mgt2"
        >
          {{ item.nickname }}
        </p>
        <div class="intro-num">
          <span class="fs-n">作品数：{{ item.panonum }}</span>
          <i class="iconfont icon-dingwei fs-n mgl2" v-if="item.areatext"></i>
          <span class="fs-n" v-if="item.areatext">{{ item.areatext }}</span>
          <i class="iconfont icon-denglu fs-n mgl2"></i>
          <span class="fs-n">{{
            item.isrz == 2 ? '摄影师' : item.isrz == 1 ? '认证用户' : '普通用户'
          }}</span>
          <i class="iconfont icon-liulanliang fs-n mgl2"></i>
          <span class="fs-n">{{ item.seecount }}</span>
          <i class="iconfont icon-qinziAPPtubiao- fs-n mgl2"></i>
          <span class="fs-n">{{ item.praisecount }}</span>
        </div>
        <p class="omit-2 fc-b1">{{ item.dec }}</p>
      </div>
      <div class="flex jc-end pano-list">
        <div
          class="pano-list-item"
          v-for="(pano, ix) in item.pano_list"
          :key="ix"
          @click.stop="preview(pano)"
        >
          <div class="pano-list-img">
            <!-- <img :src="pano.full_icon_src" alt=""> -->
            <el-image :src="pano.full_icon_src" class="full-bg">
              <div slot="placeholder" class="pac">
                <i class="el-icon-loading primary fs-xl"></i>
              </div>
              <div slot="error" class="pac">
                <i class="el-icon-loading primary fs-xl"></i>
              </div>
            </el-image>
          </div>
          <p class="omit">{{ pano.pano_name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  methods: {
    // 跳转详情页
    jumpDetail(item) {
      console.log(item)
      this.$router.push({name: 'authorDetail', params: {id: item.user_id}})
    },
    // 预览
    preview(item) {
      console.log(item)
      window.open(item.panoview_url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.module-show-list
  flex-wrap wrap
  margin-top 30px
  .module-show-item
    width 100%
    position relative
    overflow hidden
    border-bottom 1px solid #eee
    padding 20px 0
    .pano-list
      width 450px
      height 150px
      .pano-list-item
        width 120px
        height 150px
        margin-left 20px
        .pano-list-img
          width 120px
          height 120px
          overflow hidden
          .el-image
            width 120px
            height 120px
            transition all 0.5s
            &:hover
              transform scale(1.2)
        p
          height 30px
          line-height 30px
          text-align center
          padding 0 5px
    .avatar
      width 150px
      height 150px
      border-radius 50%
      overflow hidden
      margin-right 20px
      img
        width 100%
        height 100%
        border-radius 50%
    .intro
      width 610px
      &:hover
        .intro-name
          color var(--themeColor)
      .intro-num
        margin-top 20px
        margin-bottom 30px
</style>